<!--
 * @Description: 
 * @Date: 2023-02-23 18:08:34
 * @LastEditors: czp
 * @LastEditTime: 2023-03-07 14:35:53
-->
<template>
	<div>
		<div class="list">
			<div class="list-item" v-for="(item, index) in list" :key="index">
				<div class="video-box">
					<el-image :zoom-rate="1.2" :preview-src-list="list.map(item => item.img)" :initial-index="index" :src="item.img + '?imageMogr2/thumbnail/375x'" fit="cover" />
				</div>
				<span class="title">{{ item.title }}</span>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts" name="QuJingZhu">
import { useBaseStore } from "@/store/base";

const { cosPrefix } = useBaseStore();
const list = [
	{ title: "飞机", img: cosPrefix + "three-level/xiangye/chuanlianditu/1.jpg" },
	{ title: "高铁", img: cosPrefix + "three-level/xiangye/chuanlianditu/1.jpg" },
	{ title: "自驾", img: cosPrefix + "three-level/xiangye/chuanlianditu/1.jpg" },
	{ title: "旅行社", img: cosPrefix + "three-level/xiangye/chuanlianditu/1.jpg" },
	{ title: "入境指南", img: cosPrefix + "three-level/xiangye/chuanlianditu/1.jpg" },
	{ title: "旅游线路", img: cosPrefix + "three-level/xiangye/chuanlianditu/1.jpg" }
];
</script>
<style lang="scss" scoped>
.list {
	display: flex;
	flex-wrap: wrap;
	padding: 40px 320px;
	.list-item {
		display: flex;
		flex-direction: column;
		width: 410px;
		height: 360px;
		margin-right: 20px;
		margin-bottom: 20px;
		font-size: 20px;
		.video-box {
			display: flex;
			justify-content: center;
		}
		&:nth-child(3n) {
			margin-right: 0;
		}
		.el-image {
			height: 300px;
			vertical-align: middle;
		}
		.title {
			flex: 1;
			padding: 20px;
			text-align: center;
		}
	}
}
</style>
